<template>
  <a-list
    :locale="locale"
    item-layout="vertical"
    size="large"
    :data-source="listData"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <!-- 最右侧图片 -->
        <template #extra>
          <img
            width="100"
            alt="logo"
            :src="item.image"
            style="border-radius: 10px"
          />
        </template>
        <a-list-item-meta :description="item.address">
          <template #title>
            <router-link @click="toStore(item.storeId)" to="">
              <h3 style="font-weight: bold">
                {{ item.homeName }}
              </h3>
            </router-link>
          </template>
          <template #avatar
            ><a-avatar size="large" :src="item.image"
          /></template>
        </a-list-item-meta>
        <span style="font-weight: bold; font-size: 16px">
          {{ item.remark }}
        </span>
      </a-list-item>
    </template>
  </a-list>
  <!-- 分页 -->
  <div
    style="
      height: 40px;
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: center;
    "
  >
    <a-pagination
      v-model:current="pageNo"
      v-model:page-size="pageSize"
      :total="total"
      @change="handlePageChange"
    />
  </div>
</template>
<script setup>
import router from "@/router";
import { ref, onMounted } from "vue";
import { cancelPayedStores } from "@/api/collectstores";
import { useUserStore } from "@/stores/user";

const listData = ref([]);
const userStore = useUserStore();

const pageNo = ref(1);
const pageSize = ref(3);
const total = ref(0);
onMounted(() => {
  getPayedStores();
});

//获取收藏商品数据方法
function getPayedStores() {
  cancelPayedStores(pageNo.value, pageSize.value, userStore.user.key).then(
    (res) => {
      if (res.code == 200 && res.data !== null) {
        listData.value = res.data.data;
        total.value = res.data.total;
      } else {
        listData.value = [];
        total.value = 0;
      }
    }
  );
}

//监听分页变化
function handlePageChange(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getPayedStores();
}

//去商品详情页
function toStore(id) {
  router.push({ name: "Shop", query: { id: id } });
}

const locale = ref({
  emptyText: "暂无买过店铺！",
});
</script>

<style scoped>
a:hover {
  color: red;
}
.toUser {
  border-bottom: 1px solid #f2f2f2;
  padding: 0 0 5px;
  margin-bottom: 5px;
  line-height: 18px;
  font-weight: 700;
  height: 30px;
}

.btn {
  transform: scale(1);
}

.btn:active {
  transform: scale(0.97);
}

.update_tag {
  transform: scale(1);
}

.update_tag:active {
  transform: scale(0.8);
}

.everyOne {
  margin-top: 20px;
  padding-left: 10px;
}

.order_item {
  font-size: 16px;
  font-weight: bold;
}
</style>
